
<div class="container">
  <div class="row">
    <div>
      <img src="http://placehold.it/820X230">
      <h4>{{product?.title}}</h4>
      <p>{{product?.des}}</p>
      <app-stars [rating]="product.rating"></app-stars>
    </div>
  </div>
  <hr>
  <div class="row">
    <div>
      <button type="button" class="btn btn-success" (click)="isAddComment = !isAddComment">发表评论</button>
    </div>
    <div *ngIf="isAddComment">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <app-stars [readonly]='false' [(rating)]='newRating'></app-stars>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <textarea [(ngModel)]="newComment"></textarea>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <button type="button" class="btn btn-primary" (click)="addComment()">发表评论</button>
        </div>
    </div>
  </div>
  <div class="my-3 p-3 bg-white rounded box-shadow">
      <h6 class="border-bottom border-gray pb-2 mb-0">最新评论</h6>
      <div class="media text-muted pt-3" *ngFor="let comment of comments">
          <img data-src="holder.js/32x32?theme=thumb&amp;bg=007bff&amp;fg=007bff&amp;size=1" alt="32x32" class="mr-2 rounded" style="width: 32px; height: 32px;" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2232%22%20height%3D%2232%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_16247d78f49%20text%20%7B%20fill%3A%23007bff%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A2pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_16247d78f49%22%3E%3Crect%20width%3D%2232%22%20height%3D%2232%22%20fill%3D%22%23007bff%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2211.84375%22%20y%3D%2216.95625%22%3E32x32%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" data-holder-rendered="true">
          <p class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
            <strong class="d-block text-gray-dark">@{{comment.user}}</strong>
            {{comment.content}}
          </p>
          <app-stars [rating]="comment.rating"></app-stars>
      </div>
    <small class="d-block text-right mt-3">
      <a href="#">All updates</a>
    </small>
  </div>
</div>
